<!-- 顶部工具栏 -->
<template>
    <nav class="navbar navbar-main navbar-expand-lg position-sticky top-1 px-0 me-2 pt-0 pb-0 border-radius-xl z-index-sticky shadow-none" id="navbarBlur" data-scroll="true">
      <div class="container-fluid py-1 px-3">
        <NavigationMenuPartial/>
        <!-- 显示隐藏左侧菜单按钮 -->
        <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none ">
          <a href="javascript:;" class="nav-link p-0 text-body opt-menu">
            <div class="sidenav-toggler-inner">
              <i class="sidenav-toggler-line"></i>
              <i class="sidenav-toggler-line"></i>
              <i class="sidenav-toggler-line"></i>
            </div>
          </a>
        </div>
        <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
          <SearchPartial title="点击搜索"/>
          <ul class="navbar-nav  justify-content-end">
            <!-- 页面宽度减小之后的隐藏/显示左侧菜单的按钮 -->
            <li class="nav-item d-xl-none px-3 d-flex align-items-center">
              <a href="javascript:;" class="nav-link p-0 text-body opt-menu-close" id="iconNavbarSidenav">
                <div class="sidenav-toggler-inner">
                  <i class="sidenav-toggler-line"></i>
                  <i class="sidenav-toggler-line"></i>
                  <i class="sidenav-toggler-line"></i>
                </div>
              </a>
            </li>
            <FavoritesPartial/>
            <NotifyPartial/>
            <UserLoginInfoPartial/>
            <!-- 设置按钮 -->
            <li class="nav-item px-3 pt-2">
              <a href="javascript:;" class="nav-link p-0 text-body">
                <i class="fa fa-cog fa-2x fixed-plugin-button-nav"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
</template>

<script>
import NotifyPartial from './NotifyPartial.vue';
import FavoritesPartial from './FavoritesPartial.vue';
import UserLoginInfoPartial from './UserLoginInfoPartial.vue';
import NavigationMenuPartial from './NavigationMenuPartial.vue';
import SearchPartial from './SearchPartial.vue';

export default {
  name: 'HeaderPartial',
  components:{
      NotifyPartial,
      FavoritesPartial,
      UserLoginInfoPartial,
      NavigationMenuPartial,
      SearchPartial
  }
}
</script>